<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Add Tag Demo</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="addtags.js"></script>
	<style type="text/css">
		input,p,li{
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		}
		h1, input[type=button] {
			font-family:Verdana, Arial;
		}
		h1{
			font-size:24px;
			color:#333;
		}
		input#tagInput {
			border:1px solid #666;
			-webkit-box-shadow: inset 0px 0px 3px #999;
			-moz-box-shadow: inset 0px 0px 3px #999;
			box-shadow: inset 0px 0px 3px #999;
			width:240px;
			padding:3px;
			font-size:12px;
		}
		input#tagAddButton {
			border:1px solid #693;
			-webkit-border-radius:5px;
			-moz-border-radius:5px;
			border-radius:5px;
			-webkit-box-shadow: inset 0px 0px 3px #fff;
			-moz-box-shadow: inset 0px 0px 3px #fff;
			box-shadow: inset 0px 0px 3px #fff;
			background-color:#693;
			color:#fff;
			font-size:12px;
			padding:3px 6px;
			cursor:pointer;
		}
		input#tagAddButton:hover {
			background-color:#7a4;
			-webkit-box-shadow: inset 0px 1px 3px #fff;
			-moz-box-shadow: inset 0px 1px 3px #fff;
			box-shadow: inset 0px 1px 3px #fff;
		}
		input#tagResetButton {
			border:1px solid #c90;
			background-color:#c90;
			-webkit-border-radius:5px;
			-moz-border-radius:5px;
			border-radius:5px;
			-webkit-box-shadow: inset 0px 0px 3px #fff;
			-moz-box-shadow: inset 0px 0px 3px #fff;
			box-shadow: inset 0px 0px 3px #fff;
			color:#fff;
			font-size:12px;
			padding:3px 6px;
			cursor:pointer;
		}
		input#tagResetButton:hover {
			background-color:#da1;
			-webkit-box-shadow: inset 0px 1px 3px #fff;
			-moz-box-shadow: inset 0px 1px 3px #fff;
			box-shadow: inset 0px 1px 3px #fff;
		}
		ul#tagList {
			padding:0px;
			margin:10px 0;
			width:350px;
			list-style-type:none;
		}
		ul#tagList:after {
			display:block;
			clear:both;
			height:0;
			content:"";
		}
		ul#tagList li {
			position:relative;
			float:left;
			background-color:#666;
			color:#fff;
			-webkit-border-radius:5px;
			-moz-border-radius:5px;
			border-radius:5px;
			padding:3px 3px 3px 6px;
			margin-right:5px;
			margin-bottom:5px;
			font-size:12px;
		}
		ul#tagList li input.delete {
			background-color:transparent;
			border-width:0px;
			font-size:10px;
			color:#ccc;
			cursor:pointer;
		}
		ul#tagList li input.delete:hover {
			-webkit-border-radius:5px;
			-moz-border-radius:5px;
			border-radius:5px;
			background-color:#333;
			color:#fff;
		}
		p#log{
			background-color:#eee;
			-webkit-border-radius:5px;
			-moz-border-radius:5px;
			border-radius:5px;
			border:1px solid #ccc;
			width:320px;
			padding:10px;
		}
	
	</style>
</head>
<body>

<h1>Add Tags Demo</h1>

<input id="tagInput" type="text" />
<input id="tagAddButton" type="button" value="add" />
<input id="tagResetButton" type="button" value="reset" />

<ul id="tagList"></ul>

<p id="log"></p>

<script type="text/javascript">

(function(){

	var tags = ["hoge", "fuga", "foo", "bar"];
	var config = {
		input : "#tagInput",
		addButton : "#tagAddButton",
		clearButton : "#tagResetButton",
		list : "#tagList",
		deleteButton : "#tagList li input.delete"
	};
	var myaddtags = new AddTags( config, tags );
	myaddtags.bind( myaddtags.EVENT_CHANGE, function(){
		$("#log").html( this.toString() );
	});
	myaddtags.bind( myaddtags.EVENT_ERROR, function( e, msg ){
		console.log( msg );
	});

	myaddtags.run();

})();


</script>
</body>
</html>
